import React from 'react';
import { Highlight, HighlightProps } from "./index"
import { Story, Meta } from '@storybook/react/types-6-0';

export default {
	title: "Example/Highlight",
  component: Highlight,
  argTypes: {
    // https://github.com/storybookjs/storybook/blob/91e9dee33faa8eff0b342a366845de7100415367/addons/controls/README.md#control-annotations
    children: {
      control: 'text',
    }
  }
} as Meta;

const Template: Story<HighlightProps> = (args) => <Highlight {...args} />;

const javascriptCode = `import React from 'react'

const MyComponent = () => (
  <div>My component renders all the things</div>
)

export default MyComponent
`;

const typescriptCode = `import React from 'react'

export function Highlight(props: PropsWithChildren<HighlightProps>) {
	const nodeRef = useRef<HTMLDivElement>(null);
	const { children, language } = props;
	const codeBlock = (
		<div dangerouslySetInnerHTML={{ __html: escape(children + "") }} />
	);
	useEffect(() => {
		if (nodeRef.current) {
			Prism.highlightAllUnder(nodeRef.current);
		}
	}, [nodeRef]);
	return (
		<HighlightBlock ref={nodeRef}>
			<pre className={\`language-$\{language}\`}>
				<code className={\`language-$\{language}\`}>{codeBlock}</code>
			</pre>
		</HighlightBlock>
	);
}
`;

const cssCode = `.someClass {
  position: relative;
}
`;

const jsonCode = `{
  "name": "@yourorg/package",
  "version": "0.0.1",
  "description": "A sweet package",
  "repository": {
    "type": "git",
    "url": "https://github.com/yourorg/package.git"
  }
}`;

export const javascript = Template.bind({});
javascript.args = {
  children: javascriptCode,
  language: 'javascript'
}

export const typescript = Template.bind({});
typescript.args = {
  language: 'typescript',
  children: typescriptCode
}

export const css = Template.bind({});
css.args = {
  language: 'css',
  children: cssCode
}

export const json = Template.bind({})
json.args = {
  language: 'json',
  children: jsonCode
}
